<template>
  <div class="box_wrapper">
    <el-form ref="ruleFormRef" :model="formData" class="form_box">
      <el-form-item label="默认充值模板" prop="name">
        <!-- <el-select
          v-model="formData.id"
          placeholder="请选择"
          @change="changeTemplate"
        >
          <el-option
            v-for="(item, index) in optionsSelect"
            :key="index"
            :label="item.text"
            :value="item.value"
          />
        </el-select> -->
      </el-form-item>
    </el-form>
    <p class="grey" style="margin-bottom: 12px">
      <el-alert
        title="在这里可以配置默认的充值模板"
        type="warning"
        :closable="false"
      />
    </p>

    <!-- 模板 -->
    <defaultTemplate ref="baseTemplateRef" :isUnlock="false" />
    <!-- v-auth="'api:agent:template:bind'" -->
    <div style="margin-top: 20px">
      <el-button size="large" type="primary" @click="saveTMP('保存')">
        保存为默认设置
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from "vue";
import { ElMessage } from "element-plus";
import defaultTemplate from "@/components/DefaultRechargeTemlate/defaultTemlate.vue";
import { getPayTpl, updatePayTpl } from "@/api/operateCenter/global/index";
import { cloneDeep } from "lodash-es";

const ruleFormRef = ref();
const baseTemplateRef = ref();
const formData = reactive({
  id: "", // 模板ID
});

// 保存模板
const saveTMP = (str: string) => {
  let params = baseTemplateRef.value.relationDtoList;
  updatePayTpl(params).then(() => {
    ElMessage.success(`${str}成功`);
  });
};

// 获取模板
const getDefaultTemplate = () => {
  getPayTpl().then((res: Record<string, any>) => {
    nextTick(() => {
      baseTemplateRef.value.relationDtoList = cloneDeep(res);
    });
  });
};

onMounted(() => {
  getDefaultTemplate();
});
</script>

<style lang="scss" scoped>
.box_wrapper {
  min-height: calc(100vh - 70px);
  padding: 18px;
  background-color: #fff;

  .form_box {
    :deep(.el-form-item__label) {
      font-size: 16px;
      color: rgb(136 136 136);
    }
  }
}
</style>
